<template>
	<view style="padding: 50rpx;">
		<view class="infoInput">
			<form @submit="submit">
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe60c;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="number" name="phone" placeholder="请输入手机号码" v-model="phone" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe60e;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%;" class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<input type="number" name="pwd" placeholder="请输入验证码" v-model="pwd" />
						<view style="margin-left: 50rpx;width: 180rpx;height: 60rpx;background-color: #007AFF;color: white;border-radius: 10rpx;" class="gui-flex gui-align-items-center gui-justify-content-center">
							<text class="sendmsg gui-block-text gui-text-center" @tap="getVCode">{{vcodeBtnName}}</text>
						</view>
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe630;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="password" name="password" placeholder="请输入新密码" v-model="password" />
					</view>
				</view>
				<view class="info gui-flex gui-row gui-align-items-center">
					<view class="gui-icons Icon">
						&#xe630;
					</view>
					<view style="margin-left: 20rpx;margin-top: 10rpx;width: 100%">
						<input type="password" name="passwordAgain" placeholder="请再次输入新密码" v-model="passwordAgain" />
					</view>
				</view>
				<view style="margin-top:100rpx;">
					<button type="default" class="gui-button" formType="submit" 
					style="border-radius:50rpx;background-color: #007AFF;">
						<text class="gui-color-white gui-button-text">确认重置</text>
					</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script setup>
	import { ref,getCurrentInstance } from "vue"
	import graceChecker from "@/Grace6/js/checker.js"
	import ybgolbal from "../../lib/js/ybgolbal";
	const ybapi = ybgolbal.getybapi(getCurrentInstance());
	let phone = ref('');
	let pwd = ref('');
	let password = ref('');
	let passwordAgain = ref('');
	let vcodeBtnName = ref("发送验证码");
	let countNum = ref(120);
	let countDownTimer = ref(null);
	
	function getVCode(){
		var myreg=/^[1][0-9]{10}$/;
		if (!myreg.test(phone.value)){
			uni.showToast({ title: '请正确填写手机号码', icon : "none"});
			return false;
		}
		// 手机号码为 :  this.phone
		// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
		if (vcodeBtnName.value != '发送验证码' && vcodeBtnName.value != '重新发送'){return ;}
		vcodeBtnName.value =  "发送中...";
		// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
		// 假设发送成功，给用户提示
		uni.showToast({ title: '短信已发送，请注意查收', icon : "none"});
		// 倒计时
		countNum.value = 60;
		countDownTimer.value = setInterval(()=>{countDown();}, 1000);
	}
	function countDown(){
		if(countNum.value < 1){
			clearInterval(countDownTimer.value);
			vcodeBtnName.value = "重新发送";
			return;
		}
		countNum.value--;
		vcodeBtnName.value = countNum.value + "秒重发";
	}
	function submit(e){
		console.log(e)
		var formData = e.detail.value;
		console.log(formData);
		var rule = [
			{name:"phone", checkType : "phone", checkRule:"", errorMsg:"手机号码有误"},
			{name:"pwd", checkType : "string", checkRule:"4,6", errorMsg:"短信验证码错误"},
			{name:"password", checkType : "string", checkRule:"1,100", errorMsg:"注册密码不能为空"},
			{name:"passwordAgain", checkType : "samewith", checkRule:"password", errorMsg:"两次密码输入不一致"},
		];
		var checkRes = graceChecker.check(formData, rule);
		console.log(checkRes)
		if(checkRes){
			// 处理验证码的操作（与后端交互，并比较的操作）
			
			
			// 在验证码比较成功的情况下，根据手机号码，请求后端接口，进行寻找是否有这个用户
			
			
			// 有，则处理更新密码的操作
			
			
			// 跳回登录页面
			uni.navigateBack();
		}else{
			uni.showToast({ title:graceChecker.error, icon: "none" });
		}
	}
</script>

<style>
	.infoInput {
		padding: 20rpx;
	}
	
	.Icon {
		font-size: 25px;
		color: #007AFF;
	}
	
	.info {
		height: 50px;
		padding: 0rpx 10rpx;
		border-bottom: 1rpx solid gray;
	}
	
	.sendmsg{
		height:30rpx; 
		width:200rpx; 
		font-size:24rpx; 
		line-height:30rpx;
	}
</style>
